<template>
  <div class="about">
    <div class="header">
      <SreachView :title="title"></SreachView>
    </div>
    <h3><i></i>今日菜单</h3>
    <div class="main">
      <van-tabs @click="onAdd($event)" animated color="green" sticky title-active-color="green" v-model="active">
        <van-tab v-for="item in activeNames" :key="item.id" :title="item.name">
          <van-grid :column-num="2">
            <div class="list-item"  v-for="item in list" :key="item.id">
              <ItemOne :item1="item"></ItemOne>
            </div>
          </van-grid>
        </van-tab>
      </van-tabs>
      <p class="main-rig" @click="onReady">{{text}}<van-icon :name="arrow" /></p>
      <van-popup
        v-model="show"
        closeable
        close-icon-position="top-right"
        position="bottom"
        :style="{ height:'80%'}"
        @click-close-icon="onClose()"
        @close="onClear"
      >
        <van-grid :column-num="4">
          <h3>菜单分类</h3>
          <van-grid-item v-for="(item,index) in activeNames" :key="item.id" :text="item.name" @click="onAdd1(index)"/>
        </van-grid>
      </van-popup>
    </div>
  </div>
</template>

<script>
import SreachView from '../components/SreachView.vue'
import ItemOne from '../components/ItemOne.vue'
export default {
  name:"AboutView",
  data(){
    return {
      title:"搜索菜谱、食材",
      activeNames: [],
      list:[],
      index:0,
      show:false,
      text:"全部",
      active:0,
      arrow:"arrow-down",
    }
  },
  components:{
    SreachView,
    ItemOne
  },
  methods: {
    async onAdd(index){
      let a=index+1;
      let b =index+1>=10?'lk'+a:'lk0'+a;
      console.log(b);
      let res=await this.$http.getListItem2(b+'.json');
      this.list=res.data.data.big_recommend.list;
      console.log(this.list);
    },
    onAdd1(index){
      this.show=false;
      this.onAdd(index);
      this.active=index;
    },
    onReady(){
      if(this.show){
        this.show=false;
        this.text="全部";
        this.arrow="arrow-down";
      }else{
        this.show=true;
        this.text="收起";
        this.arrow="arrow-up";
      }   
    },
    onClose(){
        this.show=false;
        this.text="全部";
        this.arrow="arrow-down";
    },
    onClear(){
        this.show=false;
        this.text="全部";
        this.arrow="arrow-down";
    }
  },
  async created(){
    let res = await this.$http.getList();
    this.activeNames=res.data.data.list;
    console.log(res);
    let res1=await this.$http.getListItem2('lk01.json');
    this.list=res1.data.data.big_recommend.list;
  }
}
</script>

<style lang="scss" scoped>
  .about{
    font-size:.16rem;
    .header{
      padding-top:.35rem;
      width: 90%;
      margin:0 auto;
    }
    h3{
      width: 90%;
      height: 0.7rem;
      margin:0 auto;
      line-height:.7rem;
      font-size:.3rem;
      i{
        width: 0.05rem;
        height: 0.3rem;
        background:green;
        display:inline-block;
        margin-right:.08rem;
      }
    }
    .main{
      width:100vw;
      height:100vh;
      position:relative;
      // .van-grid{
      //   margin-top:1rem;
      // }
      // .van-popup{
      //   top:2rem;
      // }
      .main-rig{
        width:1.1rem;
        text-indent:.1rem;
        position:absolute;
        right:0;
        top:.1rem;
        background:#fff;
      }
      .van-tab__pane-wrapper{
        height: 90vh;
        overflow: auto;
        .list-item{
          width:50%;
          display:flex;
          flex-direction: column;
          justify-content: center;
        }
      }
      
    }
  }
</style>